<template>
  <Container class="common-list bg-light">
    <Tabs v-model="tab">
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="onAddPolicy"
      >新增政策</Button>
      <TabPane label="例外品牌进货设置" name="tab1">
        <FormItem :label-width="20">
          <div class="common-class">
            <i class="ivu-icon ivu-icon-ios-alert"></i>
            <span>提示：政策之间如果有规则冲突，以最后修改时间晚的为准。门店每个月底的主营品牌和关联的品牌符合本政策时才可生效。</span>
          </div>
        </FormItem>
        <div class="table-content" v-for="(item,index) in list.data" :key="index">
          <div class="table-describe">
            <span>政策名称: {{item.policyName }}</span>
            <span>生效时间: {{item.beginDate | formatDateFilter}} - {{item.endDate | formatDateFilter}}</span>
            <span>最后修改时间: {{item.modifyDate | formatDateFilter}}</span>
            <Button type="primary" @click="openEdit(item)">编辑</Button>
            <Button type="primary" @click="onDelete(item, index)">删除</Button>
          </div>
          <Table
            :height="options.tableHeight"
            stripe
            :columns="columns"
            :data='format(item.policyItems)'
            border
            no-data-text="亲，没有找到相关记录哦！~"
          ></Table>
        </div>
        <div class="no-data" v-if="this.list.data.length==0">
          <p>亲,暂时没有任何政策哦！</p>
        </div>
        <Loader :status="status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import fundData from "./list/InvalidBrandListData";
import { clearEmpty, formatDate ,getOriginData} from "@/util";
import table from "@/table";
export default {
  data() {
    return {
      keyword: "",
      tab: "tab1",
      status: "pass",
      list: fundData,
      columnData: [],
      options: {
        tableHeight: 300
      },
      columns: [
        {
          title: '被抵扣品牌',
          align: 'left',
          key: 'brandName'
        },
        {
          title: '门店类型',
          key: 'storeTypeList',
          align: 'left',
          render: (h, params) => {
            return h('div', params.row.storeTypeList.map(item => {
              return h('p',{
                style:{
                  'margin':'10px  0 10px  0'
                }
              }, item.name)
            }))
          }
        },
        {
          title: '抵上限(条/月)',
          key: 'taskQuantity',
          align: 'left',
          render: (h, params) => {
            return h('div', params.row.replaceMaxQuantity.map(item => {
              return h('p',{
                style:{
                  'margin':'10px  0 10px  0'
                }
              }, item)
            }))
          }
        },
        {
          renderHeader: (h, p) => {
            let inner = h('div', [
              h('span', '抵扣品牌'),
              h('Icon', {
                props: {
                  type: 'ios-help-circle',
                  size: 18
                }
              })
            ])
            let slot = h('div', {
              slot: 'content'
            }, [
              h('p', '用以下品牌可抵扣'),
              h('p', '“被抵扣品牌”的任务量')
            ])
            return h('Tooltip', {
              props: {
                placement: 'top',
                transfer: true
              }
            }, [inner, slot])
          },
          align: 'left',
          key: 'brandList',
          render: (h, params) => {
            return h('div', params.row.brandList.map(item => {
              return h('p',{
                style:{
                  'margin':'10px  0 10px  0'
                }
              }, item.name)
            }))
          }
        }
      ]
    }
  },
  filters: {
    formatDateFilter(v) {
      return formatDate(v);
    },
  },
  mounted() {
    this.initTable(130);
    this.getData();
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    ...table,
    onAddPolicy() {
      this.$router.push("/policy/InvalidBrand/edit");
    },
    openEdit(item) {
      this.$router.push({
        path: "/policy/InvalidBrand/edit",
        query: { id: item.id },
      });
    },
    getData() {
      let param = {
        policyName: this.keyword,
      };
      param = clearEmpty(param);
      this.status = "loading";
      this.$ajaxGet("/setting/brand_replacement_policy/page", param)
        .then((data) => {
          this.list.data = [];
          this.list.data = data || [];
          this.status = "pass";
        })
        .catch(() => {
          this.list.status = "error";
        });
    },
    format (list) {
      let newData = []
      list.forEach(listItem => {
        let flag = newData.some(item => item.brandId === listItem.brandId)
        if (flag) {
          let index = newData.findIndex(item => item.brandId === listItem.brandId)
          let itemData = newData[index]
          itemData.storeTypeList.push({
            name: listItem.storeTypeName,
            id: listItem.storeTypeId
          })
          itemData.brandList.push({
            name: listItem.replaceBrandName || '-',
            id: listItem.replaceBrandId|| '-'
          })
          itemData.replaceMaxQuantity.push(listItem.replaceMaxQuantity)
        } else {
          let obj = {}
          obj.brandName = listItem.brandName
          obj.brandId = listItem.brandId
          obj.brandList = []
          obj.storeTypeList = []
          obj.replaceMaxQuantity = []
          obj.storeTypeList.push({
            name: listItem.storeTypeName,
            id: listItem.storeTypeId
          })
          obj.brandList.push({
            name: listItem.replaceBrandName || '-',
            id: listItem.replaceBrandId || '-'
          })
          obj.replaceMaxQuantity.push(listItem.replaceMaxQuantity)
          newData.push(obj)
        }
      })
      return newData
    },
    onDelete(item, index) {
      let { id, policyName: name } = item;
      this.$Modal.confirm({
        title: "删除",
        content: "确定删除当前政策？",
        onOk: () => {
          this.$ajaxPost(`/setting/brand_replacement_policy/delete/${id}`).then(
            (data) => {
              this.$Notice.success({
                title: "删除成功",
                desc: `<span class="font-red">${name}</span> 已被删除。`,
              });
              this.list.data.splice(index, 1);
            }
          );
        },
      });
    },
  },
};
</script>
